<template>
  <div class="fixturetype-page">
    <el-card shadow="never" class="breadcrumb-card">
      <div class="breadcrumb-content">
        <div class="breadcrumb-title">
          <el-icon class="breadcrumb-icon"><Collection /></el-icon>
          <div>
            <p class="breadcrumb-subtitle">工具管理 · 工装夹具类型</p>
            <h2 class="breadcrumb-heading">工装夹具类型列表</h2>
          </div>
        </div>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>工具管理</el-breadcrumb-item>
          <el-breadcrumb-item>工装夹具类型</el-breadcrumb-item>
          <el-breadcrumb-item>工装夹具类型列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>

    <el-card shadow="never" class="search-card">
      <div class="search-header">
        <div class="search-header__title">
          <el-icon class="search-icon"><Search /></el-icon>
          <span>筛选条件</span>
        </div>
      </div>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="关键词">
          <el-input
            v-model="searchForm.keyword"
            placeholder="请输入类型编码/名称"
            clearable
            style="width: 280px"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.state"
            placeholder="请选择状态"
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="search-actions">
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
          <el-button
            type="primary"
            :icon="Search"
            :loading="loading"
            @click="handleSearch"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="search-extra">
        <div class="search-extra__tips">
          <span>支持按类型编码、名称进行模糊查询</span>
          <el-divider direction="vertical" border-style="dashed" />
          <span>状态可切换启用 / 禁用快速过滤</span>
        </div>
        <div class="search-extra__metrics">
          <span
            >当前总数：<b>{{ query.totalCount }}</b> 条</span
          >
        </div>
      </div>
    </el-card>

    <el-card shadow="never" class="table-card">
      <div class="table-header">
        <div class="table-header__left">
          <h3 class="table-title">工装夹具类型列表</h3>
          <el-tag type="info" effect="plain" size="small">
            共 {{ query.totalCount }} 条记录
          </el-tag>
        </div>
        <div class="table-header__right">
          <el-button type="success" :icon="Plus" @click="openDialogForAdd"
            >新增类型</el-button
          >
          <el-button
            type="danger"
            :icon="Delete"
            plain
            :disabled="!selection.length"
            @click="handleBatchDelete"
            >批量删除</el-button
          >
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        class="data-table"
        style="width: 100%"
        :empty-text="loading ? '数据加载中…' : '暂无符合条件的类型数据'"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="编号" width="80" align="center" />
        <el-table-column
          prop="work_fixturetypecode"
          label="类型编码"
          min-width="180"
        />
        <el-table-column
          prop="work_fixturetypename"
          label="类型名称"
          min-width="200"
        />
        <el-table-column prop="state" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag
              :type="scope.row.state === 0 ? 'success' : 'danger'"
              effect="dark"
              size="small"
            >
              {{ scope.row.state === 0 ? "启用" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="250"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              :icon="Edit"
              link
              @click="openDialogForEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              link
              @click="confirmDelete(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div style="display: flex; align-items: center; gap: 8px">
          <el-button
            size="small"
            @click="gotoFirst"
            :disabled="query.Pageindex === 1"
            >首页</el-button
          >
          <el-button
            size="small"
            @click="gotoPrev"
            :disabled="query.Pageindex === 1"
            >上一页</el-button
          >
          <el-pagination
            v-model:current-page="query.Pageindex"
            v-model:page-size="query.PageSize"
            :page-sizes="[1, 5, 10, 15]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="query.totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <el-button
            size="small"
            @click="gotoNext"
            :disabled="query.Pageindex >= totalPages"
            >下一页</el-button
          >
          <el-button
            size="small"
            @click="gotoLast"
            :disabled="query.Pageindex >= totalPages"
            >尾页</el-button
          >
        </div>
      </div>
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="820"
      class="fixturetype-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-highlight">
        <div class="dialog-highlight__main">
          <p class="dialog-pretitle">工具管理 · 工装夹具类型</p>
          <h3>{{ dialogTitle }}</h3>
          <p class="dialog-subtitle">
            快速录入类型信息，保持与工具库位的一致性，便于后续设备匹配。
          </p>
          <div class="dialog-highlight__tips">
            <span v-for="tip in createTips" :key="tip" class="tip-chip">
              <el-icon><CircleCheckFilled /></el-icon>
              {{ tip }}
            </span>
          </div>
        </div>
        <div class="dialog-highlight__status">
          <p class="highlight-label">当前类型编码</p>
          <h4 class="highlight-value">
            {{ formModel.work_fixturetypecode || "待生成" }}
          </h4>
          <div class="highlight-tags">
            <el-tag :type="typeCodeStatusType" effect="plain">
              {{ typeCodeStatusText }}
            </el-tag>
            <el-tag :type="typeStateTagType" effect="plain">
              {{ typeStateText }}
            </el-tag>
          </div>
        </div>
      </div>
      <el-alert
        class="dialog-alert"
        title="提示：可开启系统自动生成类型编码，并支持直接跳转到工具库位完成联动。"
        type="success"
        :closable="false"
        show-icon
      />
      <el-scrollbar class="type-scroll" height="420px">
        <el-form
          ref="formRef"
          class="fixturetype-form"
          :model="formModel"
          :rules="rules"
          label-width="110px"
        >
          <div class="form-section">
            <div class="section-head">
              <div>
                <p class="section-caption">STEP 01</p>
                <h4>类型基础信息</h4>
                <span>类型编码及名称需保持唯一</span>
              </div>
              <el-tag type="info" effect="dark">必填</el-tag>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="类型编码" prop="work_fixturetypecode">
                  <div class="code-input">
                    <el-input
                      v-model="formModel.work_fixturetypecode"
                      :disabled="isAutoTypeCode"
                      placeholder="请输入类型编码"
                    />
                    <el-switch
                      v-model="isAutoTypeCode"
                      inline-prompt
                      active-text="系统编码"
                      inactive-text="手动输入"
                      @change="handleAutoTypeCodeChange"
                    />
                  </div>
                  <p class="code-tip">
                    开启系统编码后将按照时间戳自动生成唯一编号
                  </p>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型名称" prop="work_fixturetypename">
                  <el-input
                    v-model="formModel.work_fixturetypename"
                    placeholder="请输入类型名称（如：压装定位夹具）"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="form-section">
            <div class="section-head">
              <div>
                <p class="section-caption">STEP 02</p>
                <h4>运行状态配置</h4>
                <span>与库位及工序启停保持一致</span>
              </div>
              <el-tag
                :type="formModel.state === 0 ? 'success' : 'danger'"
                effect="plain"
              >
                {{ formModel.state === 0 ? "当前启用" : "当前禁用" }}
              </el-tag>
            </div>
            <el-form-item label="状态" prop="state">
              <el-radio-group v-model="formModel.state">
                <el-radio :value="0">启用</el-radio>
                <el-radio :value="1">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="form-section">
            <div class="section-head">
              <div>
                <p class="section-caption">STEP 03</p>
                <h4>备注说明</h4>
                <span>描述应用场景、匹配库位等信息</span>
              </div>
              <el-tag type="warning" effect="plain">推荐记录</el-tag>
            </div>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formModel.remark"
                type="textarea"
                :rows="3"
                placeholder="如需约束库位或使用场景，可在此备注说明"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </div>

          <div class="form-section form-section--helper">
            <div class="section-head">
              <div>
                <p class="section-caption">STEP 04</p>
                <h4>工具库位联动</h4>
                <span>新增类型后可继续完善库位</span>
              </div>
              <el-tag type="primary" effect="plain">快捷入口</el-tag>
            </div>
            <div class="tool-library-card">
              <div class="tool-library-card__content">
                <h5>工具库位快速创建</h5>
                <p>保持类型与库位联动可提升借还效率：</p>
                <ul class="tool-library-card__bullets">
                  <li>按照库位编号即可定位到该类型工具</li>
                  <li>仓库管理员信息同步到借还流程</li>
                  <li>支持随时跳转至库位列表继续新增</li>
                </ul>
              </div>
              <el-button
                type="primary"
                plain
                size="large"
                @click="gotoFixtureSeat"
              >
                立即前往
                <el-icon class="tool-library-card__icon"
                  ><ArrowRight
                /></el-icon>
              </el-button>
            </div>
          </div>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button :icon="Check" type="success" @click="submitForm(formRef)"
            >保存</el-button
          >
          <el-button :icon="Close" @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button :icon="Refresh" type="warning" @click="resetForm(formRef)"
            >重置</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  ArrowRight,
  CircleCheckFilled,
  Collection,
  Search,
  Plus,
  Delete,
  Edit,
  Refresh,
  Check,
  Close,
} from "@element-plus/icons-vue";
import {
  ElMessage,
  ElMessageBox,
  type FormInstance,
  type FormRules,
} from "element-plus";
import https from "@/Http/http";
import axios from "axios";
import { onMounted, reactive, ref, computed, watch } from "vue";
import { useRouter } from "vue-router";

const tableData = ref<any[]>([]);
const selection = ref<any[]>([]);
const dialogVisible = ref(false);
const dialogTitle = ref("");
const loading = ref(false);
const router = useRouter();

const query = reactive({
  Pageindex: 1,
  PageSize: 3,
  totalCount: 0,
  pageCount: 0,
});

const searchForm = reactive({
  keyword: "",
  state: "",
});

const statusOptions = [
  { label: "启用", value: 0 },
  { label: "禁用", value: 1 },
];

const formRef = ref<FormInstance>();
const formModel = reactive({
  id: 0,
  work_fixturetypecode: "",
  work_fixturetypename: "",
  state: 0,
  remark: "",
});
const isAutoTypeCode = ref(false);
const manualTypeCodeCache = ref("");
const createTips = [
  "类型编码支持自动生成",
  "状态切换实时同步",
  "新增工具库位入口更醒目",
];
const typeCodeStatusText = computed(() =>
  isAutoTypeCode.value ? "系统自动编号已开启" : "手动输入模式"
);
const typeCodeStatusType = computed(() =>
  isAutoTypeCode.value ? "success" : "info"
);
const typeStateText = computed(() =>
  formModel.state === 0 ? "状态：启用" : "状态：禁用"
);
const typeStateTagType = computed(() =>
  formModel.state === 0 ? "success" : "danger"
);

const rules = reactive<FormRules>({
  work_fixturetypecode: [
    { required: true, message: "类型编码不可为空", trigger: "blur" },
  ],
  work_fixturetypename: [
    { required: true, message: "类型名称不可为空", trigger: "blur" },
  ],
  state: [{ required: true, message: "状态不可为空", trigger: "change" }],
  remark: [{ required: true, message: "备注不可为空", trigger: "blur" }],
});

const fetchList = () => {
  loading.value = true;
  const params: any = {
    Pageindex: query.Pageindex,
    PageSize: query.PageSize,
    Work_fixturetypecode: searchForm.keyword || undefined,
    Work_fixturetypename: searchForm.keyword || undefined,
    State: searchForm.state !== "" ? searchForm.state : undefined,
  };
  https.Reads.get("/Applicae/work_fixturetypelist", {
    params,
  })
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data.data;
      query.totalCount = res.data.totalCount;
      query.pageCount = res.data.pageCount;
    })
    .catch((error) => {
      ElMessage.error("获取工装夹具类型列表失败，请稍后重试");
      tableData.value = [];
      query.totalCount = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSearch = () => {
  query.Pageindex = 1;
  fetchList();
};

const handleReset = () => {
  searchForm.keyword = "";
  searchForm.state = "";
  handleSearch();
};

const handleSizeChange = (val: number) => {
  query.PageSize = val;
  query.Pageindex = 1;
  fetchList();
};

const handleCurrentChange = (val: number) => {
  query.Pageindex = val;
  fetchList();
};

const totalPages = computed(() =>
  Math.max(1, Math.ceil(query.totalCount / query.PageSize))
);
const gotoFirst = () => {
  if (query.Pageindex !== 1) {
    query.Pageindex = 1;
    fetchList();
  }
};
const gotoPrev = () => {
  if (query.Pageindex > 1) {
    query.Pageindex -= 1;
    fetchList();
  }
};
const gotoNext = () => {
  if (query.Pageindex < totalPages.value) {
    query.Pageindex += 1;
    fetchList();
  }
};
const gotoLast = () => {
  if (query.Pageindex !== totalPages.value) {
    query.Pageindex = totalPages.value;
    fetchList();
  }
};

const gotoFixtureSeat = () => {
  dialogVisible.value = false;
  router.push({ name: "work_fixtureseat" });
};

const handleSelectionChange = (rows: any[]) => {
  selection.value = rows;
};

const openDialogForAdd = () => {
  dialogTitle.value = "新增工装夹具类型";
  resetFormValues();
  isAutoTypeCode.value = true;
  manualTypeCodeCache.value = "";
  formModel.work_fixturetypecode = generateWorkFixtureTypeCode();
  dialogVisible.value = true;
};

const openDialogForEdit = (row: any) => {
  dialogTitle.value = "编辑工装夹具类型";
  Object.assign(formModel, row);
  isAutoTypeCode.value = false;
  manualTypeCodeCache.value = row.work_fixturetypecode || "";
  dialogVisible.value = true;
};

// 自动生成工装夹具类型编码（按 年月日时分秒，确保每次不同）
const generateWorkFixtureTypeCode = () => {
  const now = new Date();
  const pad = (n: number) => n.toString().padStart(2, "0");
  const year = now.getFullYear().toString();
  const month = pad(now.getMonth() + 1);
  const day = pad(now.getDate());
  const hour = pad(now.getHours());
  const minute = pad(now.getMinutes());
  const second = pad(now.getSeconds());
  // 参考示例，前缀使用 JJHB
  return `JJBH${year}${month}${day}${hour}${minute}${second}`;
};

// 切换系统编码开关时的处理
const handleAutoTypeCodeChange = (value: boolean) => {
  if (value) {
    manualTypeCodeCache.value = formModel.work_fixturetypecode || "";
    formModel.work_fixturetypecode = generateWorkFixtureTypeCode();
  } else {
    formModel.work_fixturetypecode = manualTypeCodeCache.value || "";
  }
};

watch(
  () => formModel.work_fixturetypecode,
  (val) => {
    if (!isAutoTypeCode.value) {
      manualTypeCodeCache.value = val || "";
    }
  }
);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (!valid) {
      return;
    }
    if (!formModel.id) {
      https.Writes.post("/Appliance/fixturetypeAdd", formModel).then(
        handleResponse
      );
    } else {
      https.Writes.put("/Appliance/fixturetypeUpdate", formModel).then(
        handleResponse
      );
    }
  });
};

const handleResponse = (res: any) => {
  if (res.data.code === 1) {
    ElMessage.success(res.data.msg);
    dialogVisible.value = false;
    fetchList();
  } else {
    ElMessage.error(res.data.msg || "操作失败");
  }
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const resetFormValues = () => {
  formModel.id = 0;
  formModel.work_fixturetypecode = "";
  formModel.work_fixturetypename = "";
  formModel.state = 0;
  formModel.remark = "";
};

const confirmDelete = (id: number) => {
  ElMessageBox.confirm("请问确认要删除吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      https.Writes.put("/Appliance/fixturetypeDelete", { id }).then((res) => {
        if (res.data.code === 1) {
          ElMessage.success(res.data.msg);
          fetchList();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作已取消",
      });
    });
};

const handleBatchDelete = () => {
  if (!selection.value.length) {
    ElMessage.warning("请选择需要删除的工装夹具类型！");
    return;
  }
  const ids = selection.value.map((item) => item.id);
  ElMessageBox.confirm("确认要批量删除选中的工装夹具类型吗？", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      https.Writes.delete("/Appliance/fixturetypeDeletes", {
        data: { ids },
      }).then((res) => {
        if (res.data.code === 1) {
          ElMessage.success(res.data.msg);
          fetchList();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作已取消",
      });
    });
};

onMounted(() => {
  fetchList();
});
</script>

<style scoped>
.fixturetype-page {
  padding: 16px 12px 24px;
  background: linear-gradient(180deg, #f5f7fb 0%, #ffffff 60%);
  min-height: 100%;
}

.search-card {
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.search-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f2f5;
}

.search-header__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-icon {
  font-size: 18px;
  color: #409eff;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.search-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

.search-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.search-extra {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.search-extra__tips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #909399;
}

.search-extra__metrics {
  font-size: 13px;
  color: #606266;
}

.search-extra__metrics b {
  font-size: 16px;
  margin: 0 2px;
  color: #303133;
}

.table-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f5;
}

.table-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.table-header__right {
  display: flex;
  gap: 12px;
}

.data-table {
  border-radius: 8px;
  overflow: hidden;
}

.data-table :deep(.el-table__header) {
  background-color: #f8f9fa;
}

.data-table :deep(.el-table__header th) {
  background-color: #f8f9fa;
  color: #606266;
  font-weight: 600;
  border-bottom: 2px solid #e4e7ed;
}

.data-table :deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

.data-table :deep(.el-table__row) {
  transition: background-color 0.3s;
}
.breadcrumb-card {
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 100%);
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.08);
  border: 1px solid rgba(64, 158, 255, 0.1);
}
.breadcrumb-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.breadcrumb-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.breadcrumb-icon {
  font-size: 28px;
  color: #409eff;
}
.breadcrumb-subtitle {
  margin: 0;
  font-size: 12px;
  color: #909399;
}
.breadcrumb-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}
.table-pagination {
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #f0f2f5;
}

.table-pagination :deep(.el-pagination) {
  justify-content: center;
}

.table-pagination :deep(.el-pagination__total) {
  font-weight: 500;
  color: #606266;
}

.type-scroll {
  margin-top: 14px;
}

.code-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fixturetype-dialog :deep(.el-dialog__body) {
  padding: 12px 28px 4px;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
}

.dialog-highlight {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  background: radial-gradient(circle at top left, #eef4ff, #fff);
  border: 1px solid #eff2f7;
}

.dialog-highlight__main {
  flex: 1;
}

.dialog-pretitle {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #909399;
  text-transform: uppercase;
}

.dialog-subtitle {
  margin: 8px 0 0;
  color: #606266;
  font-size: 13px;
}

.dialog-highlight__tips {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tip-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(64, 158, 255, 0.08);
  color: #409eff;
  font-size: 12px;
}

.dialog-highlight__status {
  min-width: 220px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(64, 158, 255, 0.18);
  box-shadow: 0 8px 20px rgba(64, 158, 255, 0.12);
}

.highlight-label {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.highlight-value {
  margin: 6px 0 12px;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  word-break: break-all;
}

.highlight-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dialog-alert {
  margin-top: 16px;
}

.fixturetype-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}

.form-section {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px 12px;
  border: 1px solid rgba(64, 158, 255, 0.12);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.08);
}

.form-section--helper {
  background: linear-gradient(135deg, #fdfcff, #f2f8ff);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.section-head h4 {
  margin: 4px 0 4px;
  font-size: 18px;
  color: #303133;
}

.section-head span {
  color: #909399;
  font-size: 13px;
}

.section-caption {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #a0a5ad;
}

.code-tip {
  margin: 6px 0 0;
  font-size: 12px;
  color: #a0a5ad;
}

.tool-library-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px dashed rgba(64, 158, 255, 0.3);
}

.tool-library-card__content {
  flex: 1;
  min-width: 240px;
}

.tool-library-card__content h5 {
  margin: 0 0 6px;
  font-size: 16px;
  color: #303133;
}

.tool-library-card__content p {
  margin: 0 0 8px;
  color: #606266;
  font-size: 13px;
}

.tool-library-card__bullets {
  margin: 0;
  padding-left: 18px;
  color: #606266;
  font-size: 13px;
}

.tool-library-card__bullets li {
  margin-bottom: 4px;
}

.tool-library-card__icon {
  margin-left: 6px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0;
}

.dialog-footer :deep(.el-button) {
  min-width: 100px;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-actions {
    margin-left: 0;
    width: 100%;
  }

  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .table-header__right {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>
